<template>
  <el-button-group size="small">
    <template v-for="(item, key) in props.btnList" :key="key">
      <template v-if="item.visible">
        <el-button
          :style="'color:' + item.color"
          :icon="item.icon"
          @click="btnMethod(item.title)"
          :disabled="item.disabled.value"
        >
          {{ item.name }}
        </el-button>
      </template>
    </template>
  </el-button-group>
</template>

<script lang="ts" setup>
// 顶部栏的按钮的属性
import { Ref } from "vue";

export interface HeaderBtn {
  name: string;
  title: string;
  visible: boolean;
  color: string;
  icon: string;
  disabled: Ref<boolean>;
}

export interface BtnProps {
  btnList: HeaderBtn[];
}

const props = withDefaults(defineProps<BtnProps>(), {
  btnList: () => {
    return [];
  },
});

const emits = defineEmits<{ (e: "btn-method", btnTitle: string): void }>();

const btnMethod = (btnTitle: string) => {
  emits("btn-method", btnTitle);
};
</script>

<style scoped></style>
